<template>
    <el-card class="box-card list">
        <template #header>
            <el-row >
                <el-col :span="18" :class="pack?'package':''" @click="pack=!pack">
                    <el-icon size="large"><Orange /></el-icon> 
                    <el-text >整单打包/备注</el-text>
                </el-col>
                <el-col :span="6" @click="reset">
                    <el-icon size="large" ><Delete /></el-icon> 
                    <el-text >清空</el-text>
                </el-col>
            </el-row>
        </template>
        <div v-for="dish in store.cart" class="item" :key="dish.dishId">
            <el-row>
                <el-text class="title" size="large">{{dish.dishName}}</el-text>
            </el-row>
            <el-row>
                <el-text class="mark" >少油/少盐</el-text>
            </el-row>
            <el-row>
                <el-col :span="16" class="price">￥{{ dish.price }}</el-col>
                <el-col :span="8" class="num">
                    <el-icon @click="subDish(dish)"><Minus /></el-icon> 
                    <el-text > {{dish.num}} </el-text> 
                    <el-icon @click="addDish(dish)"><Plus /></el-icon>
                </el-col>
            </el-row>                
        </div>
        
    </el-card>
    <el-card class="box-card sum">        
        <el-row>
            <el-col :span="16">
                <div style="font-size: 12px;" v-if="pack">
                    打包费:￥20
                </div>
                <div style="font-size: 12px;" v-else>
                    打包费:￥0
                </div>
                <div >
                    <span style="font-size: 12px;">合计：</span>
                    <span class="total">￥{{totalPrice}}</span>
                </div>
            </el-col>
            <el-col :span="8">
                <el-button @click="sendOrder">下单</el-button>       
            </el-col>
        </el-row>
    </el-card>
</template>


<script setup>
import { useStore } from '@/stores'
import { computed, ref,getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus'

const store = useStore()
const { proxy } = getCurrentInstance()

let pack=ref(false)

async function sendOrder(){
    let orderItems=[]
    store.cart.forEach(item => {
        let orderItem={}
        orderItem.dish={}
        orderItem.dish.dishId=item.dishId
        orderItem.price=item.price
        orderItem.num=item.num
        orderItems.push(orderItem)
    })
    let { data: res} = await proxy.$http({
        method:'post',
        headers: {
		    'Authorization': store.token	//	可以是授权凭证用的参数值
	    },
        data:{
            operator:{
                username:store.username
            },
            total:totalPrice.value,
            pack:pack.value,
            orderItems:orderItems
        },
		url:'/api/order'
	})
    if(res.code===200){
        ElMessage('下单成功！')
        store.clearCart()
        pack.value=false
    }
}

function reset(){
    store.clearCart()
}

function addDish(dish){
    let cart=store.cart  
    let item=cart.find(item=>dish.dishId===item.dishId)
    if(item){
        item.num++
    }else{
        dish.num=1
        cart.push(dish)
    }
    store.setCart(cart)
}

function subDish(dish){
    let cart=store.cart  
    let item=cart.find(item=>dish.dishId===item.dishId)
    item.num--
    if(item.num===0){
        cart=cart.filter(item=>item.dishId!=dish.dishId)
    }
    store.setCart(cart)
}

let totalPrice=computed(()=>{
    return store.cart.reduce((sum,item)=>{
        return sum+item.price*item.num
    },0)+(pack.value?20:0)
})
</script>
<style scoped>
.item{
    padding: 12px 5px;
    border-bottom: 1px solid #DCDFE6;
}
.package{
    color:rgb(253,95,32);

}
.package .el-text{

    color:rgb(253,95,32);
}
.list{
    height: 650px;
    margin-bottom: 10px;
}
.sum{
    height: 90px;
}
.title{
    font-weight: 900;
}
.mark{
    color: #909399;
    font-size: 11px;
}
.price{
    font-size: 20px;
    font-weight: bold;
    color: rgb(253,95,32);
}
.num .el-text{
    font-size: 20px;
    font-weight: bold;
    padding: 0 5px;
}
.num .el-icon{
    border-radius: 50%;
    padding: 2px;
    border: 1px solid rgb(253,95,32);
    height: 20px;
    width: 20px;
    font-weight: bold;
    color: rgb(253,95,32);
}
.el-button{
    background-color: rgb(253,95,32);
    color:#fff;
    border-radius: 20px;
    width: 100px;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
}
.total{
    color: rgb(253,95,32);
    font-weight: bold;
    font-size: 20px
}
</style>